<template>
  <div class="cun">
    <div class="cun1">
      <div class="sun11">
        <p>您好</p>
        <p>欢迎使用车企惠</p>
      </div>
      <!-- 注册 -->
      <div v-if="longintype == 1">
        <!-- <div class="sun12">
          <p class="sun121">姓名：</p>
          <yd-input class="sun122" v-model="userName" placeholder="请输入您的姓名"></yd-input>
        </div>
        <div class="sun12">
          <p class="sun121">昵称：</p>
          <yd-input class="sun122" v-model="loginname" placeholder="请输入您的昵称，可作为登陆账号使用"></yd-input>
        </div> -->
        <div class="sun12">
          <p class="sun121">手机号：</p>
          <yd-input
            class="sun122"
            :on-blur="chickphone"
            v-model="phone"
            regex="^\d{11}$"
            placeholder="请输入您的手机号"
          ></yd-input>
          <p v-if="isnophone" style="color:red">此手机号已被注册，请更换</p>
        </div>
        <div class="sun12">
          <p class="sun121">验证码：</p>
          <div class="sun1211">
            <yd-input class="sun122" v-model="code" regex="^\d{4}$" placeholder="请输入验证码"></yd-input>
            <yd-sendcode
              class="sun1222"
              :second="second"
              storage-key="dashuaibi"
              v-model="code1"
              bgcolor="#2583FF"
              @click.native="yanzhengma"
            ></yd-sendcode>
          </div>
          <!-- <p v-if="codeinfo" style="color:red">{{codeinfo.code ? `你的验证码为${codeinfo.code}` : null}}</p> -->
        </div>
        <div class="sun12">
          <p class="sun121">密码：</p>
          <yd-input
            class="sun122"
            type="password"
            v-model="password1"
            regex="^([a-zA-Z0-9]){1}([a-zA-Z0-9]|[\\.\\_]){6,14}$"
            placeholder="请输入您的密码"
          ></yd-input>
          <span class="haha">由数字字母开头,可包含. _ 长度为7到15位</span>
        </div>
        <div class="sun12">
          <p class="sun121">确认密码：</p>
          <yd-input
            class="sun122"
            :on-blur="duibi"
            type="password"
            v-model="password2"
            regex="^([a-zA-Z0-9]){1}([a-zA-Z0-9]|[\\.\\_]){6,14}$"
            placeholder="请输入您的确认密码"
          ></yd-input>
          <p
            v-show="yanzhengshow == true"
            class="animated fadeInDown"
            style="color:red"
          >两次密码不一致,请确认输入</p>
        </div>
        <div @click="longintype = 2">
          <p style="text-align:right">已有账号 点击登陆</p>
        </div>
        <div class="sun13">
          <yd-button
            @click.native="zhuce"
            class="sun131"
            loading-txt="请稍等"
            :loading="zhucexianshi"
            bgcolor="#2583FF"
            size="large"
            color="#ffffff"
            type="primary"
          >注册</yd-button>
        </div>
      </div>
      <!-- 注册结束 -->

      <!-- 登陆 -->
      <div v-if="longintype==2">
        <div class="sun12">
          <p class="sun121">手机号：</p>
          <yd-input class="sun122" v-model="dengluquery.phoneNo" placeholder="请输入手机号"></yd-input>
        </div>
        <div class="sun12">
          <p class="sun121">密码：</p>
          <yd-input
            class="sun122"
            v-model="dengluquery.password"
            type="password"
            placeholder="请输入密码"
          ></yd-input>
        </div>
        <div @click="longintype = 1">
          <p style="text-align:right">没有账号？点击注册</p>
        </div>
        <div class="sun13">
          <yd-button
            @click.native="loginme"
            class="sun131"
            loading-txt="请稍等"
            :loading="zhucexianshi"
            bgcolor="#2583FF"
            size="large"
            color="#ffffff"
            type="primary"
          >登陆</yd-button>
        </div>
      </div>

      <!-- 登陆结束 -->
    </div>
  </div>
</template>



<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      codeinfo: null,
      longintype: 2,
      dengluquery: {
        phoneNo: "",
        password: "",
        wxOpenid: localStorage.getItem("openId"),
      },
      isnophone: false,
      phone: "",
      code: "",
      second: 60,
      // loginname: undefined,
      // userName: undefined,
      code1: false,
      password1: undefined,
      password2: undefined,
      yanzhengshow: "",
      sid: "",
      zhucexianshi: false
    };
  },
  created() {},
  methods: {
    chickphone() {
      if (this.phone) {
        let _vm = this;
        let data = {
          phone: _vm.phone
        };
        axios({
          method: "post",
          url: "http://139.155.89.213:8111/api/user/checkPhoneNo",
          // url: "http://wx.91cqh.com/car/mobile/api/user/checkPhoneNo",
          data: qs.stringify(data),
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        }).then(function(res) {
          _vm.isnophone = res.data.data.flag;
        });
      }
    },
    loginme() {
      let _vm = this;
      this.$Api
        .post("/api/user/login", _vm.dengluquery)
        .then(res => {
          if (res.data.code == 200) {
            this.code1 = true;
            this.$dialog.loading.close();
            // window.localStorage.setItem("userId", res.data.data.userId);
            // window.localStorage.setItem("userType", res.data.data.userType);
            // window.localStorage.setItem("token", res.data.data.token);
            this.$dialog.toast({
              mes: "登陆成功",
              icon: "success",
              timeout: 1500
            });
            _vm.$router.push({ path: "/indexx" });
          } else {
            this.$dialog.loading.close();
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        })
        .catch(err => {});
    },
    yanzhengma() {
      if (this.phone) {
        this.$dialog.loading.open("发送中...");
        let data = {
          phone: this.phone
        };
        this.$Api
          .get("/api/sms/sendsms", data)
          .then(res => {
            if (res.data.code == 200) {
              this.code1 = true;
              this.$dialog.loading.close();
              this.$dialog.toast({
                mes: "已发送",
                icon: "success",
                timeout: 1500
              });
              this.codeinfo = res.data.data;
            } else {
              this.$dialog.loading.close();
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
            }
          })
          .catch(err => {});
      } else {
        this.$dialog.toast({
          mes: "请输入手机号",
          icon: "error",
          timeout: 1500
        });
      }
    },
    duibi() {
      if (this.password1 == this.password2) {
        this.yanzhengshow = false;
      } else {
        this.yanzhengshow = true;
      }
    },
    zhuce() {
      let _vm = this;
      if (_vm.zhucexianshi == true) {
        return;
      }
      _vm.zhucexianshi = true;
      if (
        _vm.password1 !== _vm.password2 &&
        _vm.password1 !== undefined &&
        _vm.password2 !== undefined
      ) {
        _vm.zhucexianshi = false;
        _vm.$dialog.toast({
          mes: "两次密码不一致，请检查",
          timeout: 1500
        });
        return;
      }
      if (
        _vm.password1 == _vm.password2 &&
        _vm.password1 !== undefined &&
        _vm.password2 !== undefined
      ) {
        let data = {
          phoneNo: _vm.phone,
          loginname: _vm.loginname,
          userName: _vm.userName,
          code: _vm.code,
          wxOpenid: localStorage.getItem("openId"),
          password: _vm.password1
        };
        _vm.$Api
          .post("/api/user/reg", data)
          .then(res => {
            _vm.zhucexianshi = false;
            if (res.data.code == 200) {
              // localStorage.setItem("token", res.data.data.token);
              // localStorage.setItem("userId", res.data.data.userId);
              // localStorage.setItem("userType", res.data.data.userType);
              _vm.$dialog.toast({
                mes: "注册成功",
                timeout: 1500
              });
              _vm.longintype = 2
              // _vm.$router.push({ path: "/indexx" });
              _vm.phone = "";
              _vm.code = "";
              _vm.loginname = "";
              _vm.userName = "";
              _vm.password1 = "";
              _vm.password2 = "";
            } else {
              _vm.$dialog.toast({
                mes: res.data.message,
                timeout: 1500
              });
              _vm.phone = "";
              _vm.code = "";
              (_vm.loginname = ""), (_vm.userName = ""), (_vm.password1 = "");
              _vm.password2 = "";
            }
          })
          .catch(err => {});
      }
    }
  }
};
</script>


<style scoped>
.cun {
}

.cun1 {
  padding: 3rem;
}

.sun11 {
  margin-bottom: 2rem;
}

.sun11 :first-child {
  font-size: 1rem;
  color: rgb(119, 119, 119);
  padding: 0.5rem 0;
  font-family: PingFangSC-bold;
}

.sun11 :last-child {
  font-size: 1rem;
  color: rgb(119, 119, 119);
  font-weight: bold;
  font-family: PingFangSC-bold;
}

.sun1222 {
  height: 1.5rem;
  width: 5.8rem;
  font-size: 0.5rem;
}

.sun1211 {
  display: flex;
}

.sun12 {
  position: flex;
  padding: 0.5rem 0 0.5rem 0;
}

.sun121 {
  /* margin: 0.2rem 0 0.2rem 0; */
  font-size: 0.8rem;
  font-weight: bold;
}

.sun122 {
  height: 2rem;
  /* width: 85%;
    float: right; */
}

.sun13 {
  margin-top: 2rem;
}

.sun131 {
  height: 2rem;
  font-size: 0.8rem;
}

.haha {
  font-size: 0.5rem;
  color: rgb(202, 202, 202);
}
</style>
